<template>
    <!-- 结果内容区域 -->
    <view class="result-content">
        <!-- 结果头部信息 -->
        <view class="result-header">
            <view class="time-spent">用时&nbsp;&nbsp;{{ formatTimeSpent(timeSpent) }}</view>
            <view class="submitted-status">已提交</view>
        </view>

        <!-- 答题结果列表 -->
        <view class="answers-list">
            <view v-for="(answer, index) in answers" :key="index" class="answer-item">
                <view class="question-number">{{ index + 1 }}.</view>
                <view class="answer-circle flex ai-c jc-c" :class="getAnswerClass(answer)">
                    <text v-if="answer !== null" class="answer-letter">
                        {{ String.fromCharCode(65 + answer) }}
                    </text>
                    <text v-else class="answer-dash">-</text>
                </view>
            </view>
        </view>
        <!-- <view class="nav-btn next-btn" @click="handleViewAnswers">查看结果</view> -->
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '@/api'

// 定义组件属性
const props = defineProps({
    timeSpent: {
        type: Number,
        default: 0 // 用时（秒）
    },
    answers: {
        type: Array,
        default: () => []
    },
    totalQuestions: {
        type: Number,
        default: 0
    },
    ques_id: {
        type: String,
        default: ''
    }
})

// 定义组件事件
const emit = defineEmits(['review', 'home', 'result'])

// 响应式数据
const currentTime = ref(new Date())

// 格式化当前时间
const formatTime = (date) => {
    const hours = date.getHours().toString().padStart(2, '0')
    const minutes = date.getMinutes().toString().padStart(2, '0')
    return `${hours}:${minutes}`
}

// 格式化用时
const formatTimeSpent = (seconds) => {
    const minutes = Math.floor(seconds / 60)
    const remainingSeconds = Math.floor(seconds % 60)
    const milliseconds = Math.floor((seconds % 1) * 100)
    return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(2, '0')}`
}

// 获取答案样式类
const getAnswerClass = (answer) => {
    if (answer === null) {
        return 'unanswered'
    }
    return 'answered'
}

// 处理查看解析
const handleReview = () => {
    emit('review')
}

// 处理返回首页
const handleHome = () => {
    emit('home')
}

// 处理查看结果
const handleViewAnswers = () => {
    api.getQuestionResult({
        ques_id: props.ques_id,
    }).then(res => {
        console.log('查看结果:', res)
        if (res.data.ming == 0){
           uni.showToast({
            title: '答题还未结束',
            icon: 'none'
           })
           return
        }
        emit('result', res)
    })
}
// 组件挂载时更新时间
onMounted(() => {
    // 每分钟更新一次时间
    setInterval(() => {
        currentTime.value = new Date()
    }, 60000)
})
defineExpose({
    handleViewAnswers
})

</script>

<style lang="scss" scoped>
.nav-btn {
    width: 220rpx;
    height: 58rpx;
    line-height: 58rpx;
    text-align: center;
    border-radius: 44rpx;
    font-size: 22rpx;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 auto;
}
.next-btn {
    background: #0F50DC;
    color: #fff;
}

.next-btn:hover {
    background: #0d47a1;
}
.result-content {
    border-radius: 24rpx;
    width: 100%;
    padding: 32rpx;
    box-sizing: border-box;
    overflow-y: auto;
    height: calc(100vh - 286rpx);
    padding-top: 64rpx;
    background: radial-gradient(52% 52% at 72% 89%, rgba(157, 123, 243, 0.08) 0%, rgba(188, 73, 255, 0) 100%), radial-gradient(69% 69% at 4% 86%, rgba(166, 155, 253, 0.08) 0%, rgba(128, 193, 255, 0) 100%), radial-gradient(45% 74% at 94% 10%, rgba(65, 209, 200, 0.08) 0%, rgba(54, 159, 116, 0) 100%), rgba(64, 134, 238, 0.04);
}

.result-header {
    text-align: center;
    margin-bottom: 40rpx;
}

.time-spent {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 20rpx;
    font-weight: 700;
}

.submitted-status {
    font-size: 26rpx;
    color: #666;
}

.answers-list {}

.answer-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24rpx;
    margin-bottom: 40rpx;
}

.question-number {
    font-size: 30rpx;
    color: #333;
    font-weight: 500;
    min-width: 60rpx;
}

.answer-circle {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.answer-circle.answered {
    background: #333;
}

.answer-circle.unanswered {
    background: #ccc;
}

.answer-letter {
    font-size: 28rpx;
    font-weight: 600;
    color: #fff;
}

.answer-dash {
    font-size: 32rpx;
    font-weight: 600;
    color: #fff;
    line-height: 56rpx;
}

.result-footer {
    width: 100%;
}

.action-buttons {
    gap: 24rpx;
}

.action-btn {
    width: 320rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    border-radius: 44rpx;
    font-size: 32rpx;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.review-btn {
    background: #0F50DC;
    color: #fff;
}

.review-btn:hover {
    background: #0d47a1;
}

.home-btn {
    color: #666;
    border: 1px solid rgba(0, 0, 0, 0.3);
}

.home-btn:hover {
    background: #dee2e6;
}
</style>
